<template>
	<view class="seckill-goods-item bg-white e-flex e-m-b-20 e-p-20" v-if="info">
		<view class="e-rela">
			<load-image mode="aspectFill" :size="['200rpx','194rpx']"  radius="10rpx"  :src="info.coverImg">
			</load-image>
			<view class="e-abso sell-out-mask e-flex e-flex-xy-center" v-if="info.buyStock === info.stock">
				<view class="sell-out-box">
					<text class="e-font-24 c-white">{{$t('seckill.bhz')}}</text>
				</view>
			</view>
		</view>
		<view class="e-m-l-20 e-flex-1">
			<view class="e-m-b-20">
				<text class="e-line-2">{{info.productName}}</text>
			</view>
			<view class="e-m-b-20 e-flex">
				<view class="group-box-1" :style="{backgroundColor:collageTextBackgroundColor, color: AppSkin.primary}" >
					<text class="e-font-24">{{info.peopleNumber}} {{$t('spellgroup.pg')}}</text>
				</view>
				<view class="group-box-2 e-m-l-20">
					<text class="c-secondary e-font-24">{{info.buyStock}} {{$t('spellgroup.pgs')}}</text>
				</view>
			</view>
			<view class="e-flex e-flex-between">
				<view class="price fw-600 c-red">
					<text class="e-font-24">{{$unitEn}}</text>
					<text class="e-font-32">{{ info.price }}</text>
				</view>
				<view v-if="info.buyStock !== info.stock" class="snapup-btn bg-primary e-font-26 c-white" @tap="
						$goTo('/pages/classify/goods/info/index',  {
							id: info.productId,
							skuId: info.skuId
						})
					">{{$t('spellgroup.snapup')}}</view>
					<view v-else class="grey-btn snapup-btn c-white e-font-26">
						{{$t('spellgroup.snapup')}}
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	import skinMixIn from '@/common/mixin/skinMixIn'
	export default {
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
		options: {
			virtualHost: true
		},
		// #endif
		props: {
			info: Object
		},
		mixins:[skinMixIn],
		data() {
			return {}
		},
		computed:{
			collageTextBackgroundColor() {
				return this.AppSkin.primary.replace('1)', '0.05)')
			},
		},
	}
</script>

<style lang="scss">
	.seckill-goods-item {
		border-radius: 10rpx;
	}
	.snapup-btn {
		border-radius: 25rpx;
		display: inline-block;
		padding: 8rpx 16rpx 8rpx 18rpx;
		min-width: 110rpx;
		text-align: center;
	}
	.group-box-1 {
		padding: 4rpx 20rpx;
		border-radius: 4px;
		line-height: 34rpx;
	}
	.grey-btn {
		background: #989898;
	}
	.sell-out-mask {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 10rpx;
		background-color: rgba(255, 255, 255, 0.5);
		.sell-out-box {
			background-color: rgba(0, 0, 0, 0.5);
			padding: 8rpx 32rpx;
			border-radius: 32rpx;
		}
	}
</style>